<template>
  <div id="mModal" v-if="modalToggle" @click.self="mask">
    <div class="modal-box">
      <h3 :style="[ shutDown ? { marginBottom: '10px' } : '']">{{ modalTitle }}</h3>
      <div class="modal-close" @click="maskClose">
        <Icon type="ios-close-circle-outline" size="40" />
      </div>
      <div v-if="shutDown" id="modal-box-shut">
        <div>故障原因: 主电源跳闸</div>
        <div>
          <img src="../../assets/mainImages/icon_error.png" alt="">
        </div>
      </div>
      <div v-else>
        <div id="modal-box-1" v-if="isTrue">
          <!--<p>压力上限 <input v-model="limit.upper" type="text"></p>-->
          <!--<p>压力下限 <input v-model="limit.lower" type="text"></p>-->
          <Form ref="limit" :model="limit" :label-width="120">
            <FormItem v-for="(item, index) in limit.devParams" :key="index"
                      :label="item.label"
                      :rules="{message: '请输入正确的数值', trigger: 'blur'}"
                      :prop="item.label">
              <InputNumber :max="200" :min="0" v-model="item.value"></InputNumber>
              <!--<Input type="number" :max="10" :min="0" v-model="item.value"/>-->
            </FormItem>
          </Form>
        </div>
        <div id="modal-box-2" v-if="!isTrue && !openClose">
          <div class="modal-boot" v-for="(item, index) in boots" :key="index">
            <div>
              <img :src="imgFilter(item)" alt="">
              <p>{{item.name.substring(0, 5)}}</p>
            </div>
            <h5 class="modal-line"></h5>
          </div>
        </div>
        <div id="modal-box-3" v-if="openClose">
          <Row :gutter="20" style="height: 40px; line-height: 40px;margin-bottom: 100px">
            <Col span="5">
              <div style="font-size: 16px;">改变频率 :</div>
            </Col>
            <Col span="15">
              <div>
                <InputNumber :max="50" :min="30" v-model="rate"></InputNumber>
                <p v-show="!rate">请输入频率</p>
              </div>
            </Col>
            <Col span="4">
              <div>
                <Button size="large" type="primary" style="width: 80px" :loading="rateLoading" @click="rateSend">发 送</Button>
              </div>
            </Col>
          </Row>
          <time-btn
            :btnText="btnText"
            :activeDateBtn="activeDateBtn"
            :btnDistance="{marginRight: '40px'}"
            @changeBtn="changeBtn">
          </time-btn>
        </div>
      </div>
      <h4>
        <Button size="large" type="primary" v-if="shutDown" @click="modalShutDown">关 闭</Button>
        <Button size="large" type="primary" style="margin-top: 30px" v-if="isTrue && !shutDown" @click="modalSave">确 定</Button>
        <Button size="large" type="primary" style="margin-top: 50px" v-if="!isTrue && !shutDown && !openClose" @click="oneShutDown" :loading="loading">{{ isOpen ? '一键开机' : '一键关机' }}</Button>
      </h4>
    </div>
  </div>
</template>

<script>
  import TimeBtn from './timeBtn'
  export default {
    name: 'mModal',
    props: {
      // 判断条件 显示 是上下限 DOM 还是 显示 一键 开关的 DOM
      isTrue: {
        type: Boolean,
        default: true
      },
      // 判断 是否是 机器故障， 关闭按钮显示
      shutDown: {
        type: Boolean,
        default: false
      },
      // 判断 是 一键开机 还是 一键关键 的 开关
      isOpen: {
        type: Boolean,
        default: true
      },
      // modal 的 标题
      modalTitle: {
        type: String,
        default: ''
      },
      // modal 弹窗的显示隐藏
      modalToggle: {
        type: Boolean,
        default: false
      },
      // 俩个 输入框 前面的 的 需要的数据 对象
      limit: {
        type: Object,
        default: () => {
          return {
            devId: '',
            devParams: []
          }
        }
      },
      // 一键开机和一键关机 的数据
      boots: {
        type: Array,
        default: () => {
          return []
        }
      },
      // 一键关机和一键开机 loading
      loading: {
        type: Boolean,
        default: false
      },
      // 冷却泵的 双击 控制 显示的 内容 ， 改变频率
      openClose: {
        type: Boolean,
        default: false
      },
      // 冷却泵 的双击 开启和关闭的数组
      btnText: {
        type: Array,
        default: () => {
          return []
        }
      },
      // 是否激活
      activeDateBtn: {
        type: String,
        default: ''
      },
      // 一键关机和一键开机 loading
      rateLoading: {
        type: Boolean,
        default: false
      }
      // end
    },
    data () {
      return {
        rate: null,
        content: ''
      }
    },

    created () {

    },
    mounted () {

    },
    computed: {},
    methods: {
      // 确定 按钮
      modalSave () {
        this.$refs.limit.validate((valid) => {
          if (valid) {
            // this.$emit('modalSave', JSON.stringify(this.limit))
            this.$emit('modalSave')
          }
        })
      },
      // 关闭 弹窗的 方法
      maskClose () {
        this.$emit('maskClose')
      },
      // 故障机器 关闭的 方法
      modalShutDown () {
        this.$emit('modalShutDown')
      },
      // 一键开机 和一键 关机的 方法
      oneShutDown () {
        this.$emit('oneShutDown')
      },
      // 遮罩层 的 外派事件
      mask () {
        this.$emit('mask')
      },
      // 图片的过滤
      imgFilter (item) {
        if (item.value === 4 || item.value === 5) {
          return require(`../../assets/mainImages/icon_gif${item.value}.gif`)
        } else {
          return require(`../../assets/mainImages/icon_gif${item.value}.png`)
        }
      },
      // 冷却泵 频率 的开关
      changeBtn (item) {
        this.$emit('changeBtn', item)
      },
      // 发送 频率 的 按钮
      rateSend () {
        if (!this.rate) return false
        this.$emit('rateSend', this.rate)
      },
      rateClear () {
        this.rate = null
      }
    },
    destroyed () {

    },
    components: {TimeBtn}
  }
</script>

<style lang='scss'>
  #mModal {
    @include modalFixed;
    .modal-box {
      width: 600px;
      height: 426px;
      background-color: rgba(20, 38, 89, 1);
      color: $font-f;
      position: relative;
      h3 {
        width: 30%;
        margin: 50px auto;
        text-align: center;
        font-size: 24px;
      }
      .modal-close {
        position: absolute;
        top: -20px;
        right: -20px;
        z-index: 99999;
        &:hover {
          cursor: pointer;
        }
      }
      #modal-box-1, #modal-box-3 {
        width: 50%;
        margin: 0 auto;
        text-align: center;
        .ivu-form .ivu-form-item-label {
          font-size: 16px;
          color: $font-f;
        }
        .ivu-input-number-input {
          background: none;
          color: #fff;
          text-align: center;
        }
        .ivu-input-number {
          background: none;
          border: none;
          border-bottom: 1px solid #8C99B2;
          border-radius: 0;
          text-align: center;
          color: $font-f;
          font-size: 16px;
          width: 100% !important;
        }
      }
      #modal-box-3 {
        width: 80%;
      }
      #modal-box-2 {
        margin: 20px auto;
        width: 80%;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        div:last-child {
          .modal-line {
            display: none;
          }
        }
        .modal-boot {
          display: flex;
          justify-content: center;
          align-items: flex-start;
          div {
            display: inline-block;
            p {
              padding-top: 10px;
              font-size: 16px;
            }
            img {
              display: inline-block;
              width: 50px;
              height: 50px;
              border-radius: 50%;
              background-color: rgba(15,30,73,1);
            }
          }
          .modal-line {
            width: 80px;
            height: 1px;
            display: inline-block;
            margin-top: 25px;
            background: rgba(76, 144, 253, 1);
          }
        }
      }
      #modal-box-shut {
        width: 50%;
        margin: 0 auto;
        text-align: center;
        font-size: 18px;
        div:nth-child(2) {
          padding-top: 30px;
        }
      }
      h4 {
        width: 250px;
        margin: 50px auto;
        .ivu-btn-primary {
          width: 250px;
          background-color: $btn-blue;
          height: 42px;
          font-size: 18px;
          &:hover {
            background-color: #57a3f3;
          }
        }
      }
    }
  }
</style>
